<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />

    <title>Aleksandar Aki Rodić</title>

    <meta name="description" content="Aleksandar Aki Rodić is an artist, designer and software engineer. He uses computer graphics and the art of programming to create new experiences on the web." />
    <meta name="keywords" content="portfolio, webgl, visual effects, new media, art, design, engineering, web development" />

    <meta itemprop="name" content="Aleksandar Aki Rodić" />
    <meta itemprop="description" content="Aleksandar Aki Rodić is an artist, designer and software engineer." />

    <link rel="author" content="Aleksandar Aki Rodić" href="https://github.com/arodic" />
    <link rel="me" content="Aleksandar Aki Rodić" href="http://akirodic.com" />

    <!-- Web application enable -->
    <link rel="manifest" href="./manifest.json" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- Web application name -->
    <meta name="application-name" content="Aleksandar Aki Rodić" />
    <meta name="apple-mobile-web-app-title" content="Aleksandar Aki Rodić" />

    <!-- Browser UI color -->
    <meta name="theme-color" content="#f5f5f5" />
    <meta name="msapplication-TileColor" content="#f5f5f5" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#f5f5f5" />

    <!-- Home screen icons -->
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta itemprop="image" content="/images/logo/io-512.png" />
    <meta name="msapplication-TileImage" content="/images/logo/io-144-precomposed.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/images/logo/io-144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/images/logo/io-152.png">

    <!-- Other icons -->
    <link rel="icon" type="image/png" href="/images/logo/io-512.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/images/logo/io-192.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/images/logo/io-96.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/images/logo/io-32-alt.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/images/logo/io-16.png" />
    <link rel="apple-touch-icon" href="/images/logo/io-152.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/images/logo/io-72.png">

    <!-- Social sharing data -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="arodic" />
    <meta name="twitter:title" content="Aleksandar Aki Rodić" />
    <meta name="twitter:creator" content="arodic" />
    <meta name="twitter:domain" content="akirodic.com" />
    <meta name="twitter:image" content="/images/logo/io-192.png" />
    <meta property="og:title" content="Aleksandar Aki Rodić" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/images/logo/io-192.png" />
    <meta property="og:site_name" content="Aleksandar Aki Rodić" />
    <meta property="og:description" content="Aleksandar Aki Rodić" />
    <meta property="og:locale" content="en_US" />

    <link lazyload href="https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap|Roboto+Mono&display=swap" rel="stylesheet">

    <script type="text/javascript" src="https://assets.digitalclimatestrike.net/widget.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-148217203-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-148217203-1');
    </script>

    <script async src="https://www.gstatic.com/firebasejs/5.8.5/firebase-app.js"></script>
    <script async src="https://www.gstatic.com/firebasejs/5.8.5/firebase-firestore.js"></script>

    <style>
      html {
        font: 16px 'Open Sans', Helvetica, Arial, sans-serif;
        width: 100%;
        height: 100%;
      }
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
      }
      io-md-view {
        display: block; /* TODO: remove */
        padding: 1em !important;
      }
      .main {
        display: flex;
        flex-direction: column;
        flex: 0 0 100%;
        max-height: 100%;
        flex: 1 1 auto;
      }
      io-button[label="Subscribe"] {
        display: none;
        margin: 1em;
      }
      io-main-page[permissionPending] io-button[label="Subscribe"] {
        display: inline-block;
      }
      .updates .publishdate {
        font-size: 0.75em;
        text-align: right;
        opacity: 0.5;
        margin: 0.5em;
        margin-bottom: -2.3em;
      }
      .archive[overflow] io-md-view > h3:first-child {
        display: none;
      }
      .archive io-sidebar > io-button {
        text-align: left;
        align-self: stretch;
      }
      .archive > .io-content {
        flex: 0 1 50em;
      }
    </style>
    <script type="module">

    import {IoStorageFactory as $, IoSelectorTabs} from "./node_modules/io-gui/build/io-core.js";
    import {IoServiceLoader} from "./node_modules/io-gui/build/io-extras.js";

    let db = null;

    export class IoMainPage extends IoSelectorTabs {
      static get Properties() {
        return {
          precache: true,
          selected: $({key: 'page', value: 'About', storage: 'hash'}),
          service: IoServiceLoader,
          subscription: '',
          permissionPending: {
            value: true,
            reflect: 1,
          },
          role: 'main',
          class: 'main',
        };
      }
      get compose() {
        return {
          service: {subscription: this.bind('subscription')},
        }
      }
      constructor(props) {
        super(props);
        this.options = ['About', 'Updates', 'Archive', 'Elsewhere'];
        this.elements = [
          ['io-md-view', {name: 'About', class: 'about', path :'./docs/about.md'}],
          ['div', {name: 'Updates', class: 'updates', cache: false}, [
            ['io-button', {label: 'Subscribe', action: this.service.requestNotification}],
            ['io-md-view', {path :'./docs/updates/new-website.md'}],
          ]],
          ['io-selector-sidebar', {name: 'Archive', precache: true, class: 'archive', vertical: true, selected: $({key: 'project', value: 'WebGL Jellyfish', storage: 'hash'}), minWidth: 450,
            options: [
              'WebGL Jellyfish',
              'Cardboard VR',
              'Dreams of Black',
              'Daily Routines',
              'Flux Factory',
              'Google Zeitgeist',
              'Just Reflector',
              'Star Wars 1313',
              'TED Installation'
            ],
            elements: [
              ['io-md-view', {name: 'WebGL Jellyfish', path :'./docs/archive/webgl-jellyfish.md'}],
              ['io-md-view', {name: 'Cardboard VR', path :'./docs/archive/cardboard-launch.md'}],
              ['io-md-view', {name: 'Dreams of Black', path :'./docs/archive/rome.md'}],
              ['io-md-view', {name: 'Daily Routines', path :'./docs/archive/daily-routines.md'}],
              ['io-md-view', {name: 'Flux Factory', path :'./docs/archive/flux-factory.md'}],
              ['io-md-view', {name: 'Google Zeitgeist', path :'./docs/archive/google-zeitgeist-2013.md'}],
              ['io-md-view', {name: 'Just Reflector', path :'./docs/archive/just-a-reflector.md'}],
              ['io-md-view', {name: 'Star Wars 1313', path :'./docs/archive/star-wars-1313.md'}],
              ['io-md-view', {name: 'TED Installation', path :'./docs/archive/unnumbered-sparks.md'}],
            ]
          }],
          ['io-md-view', {name: 'Elsewhere', path :'./docs/contact.md'}],
        ];
      }
      subscriptionChanged() {
        //TODO: see why it triggers twice
        if (!db && window.firebase !== undefined) {
          firebase.initializeApp({
            apiKey: "AIzaSyAuvhV5js7UQm95TvZECdlQxe9GQgpBMLQ",
            authDomain: "akirodic-c3d1d.firebaseapp.com",
            databaseURL: "https://akirodic-c3d1d.firebaseio.com",
            projectId: "akirodic-c3d1d",
            storageBucket: "akirodic-c3d1d.appspot.com",
            messagingSenderId: "717681979194"
          });
          db = window.firebase.firestore();
        }
        if (db) {
          var subscribersRef;
          if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
            subscribersRef = db.collection("subscriptions").doc("local_test_subscribers");
          } else {
            subscribersRef = db.collection("subscriptions").doc("subscribers");
          }
          subscribersRef.update({list: firebase.firestore.FieldValue.arrayUnion(this.subscription)});
        }
      }
      changed() {
        super.changed();
        this.permissionPending = "serviceWorker" in navigator && "PushManager" in window && this.service.permission === 'default';
      }
    }
    IoMainPage.Register();
    </script>
  </head>
  <body>
    <noscript>JavaScript is required to view this page!</noscript>
    <io-main-page></io-main-page>
  </body>
</html>
